<template>
  <a-collapse activeKey="1" expand-icon-position="right">
    <a-collapse-panel key="1" header="查询条件">
      <a-form-model layout="inline" :model="params" ref="paramsForm">
        <a-form-model-item label="名称">
          <a-input
            v-keyupEnter="{ callback: handleRefresh }"
            v-model.trim="params.name"
            placeholder="请输入昵称/账号/工号"
          />
        </a-form-model-item>
        <!-- <a-form-model-item label="所属角色">
          <a-select
            style="width: 100%"
            v-model="params.roleId"
            placeholder="请选择所属角色"
          >
            <a-select-option value>全部角色</a-select-option>
            <a-select-option
              v-for="item in roles"
              :key="item.id"
              :value="item.id"
              >{{ item.name }}</a-select-option
            >
          </a-select>
        </a-form-model-item> -->
        <a-form-model-item>
          <a-button
            icon="search"
            type="primary"
            :loading="loading"
            @click="handleRefresh"
            >查询</a-button
          >
          <a-divider type="vertical" />
          <a-button icon="reload" @click="handleReset">重置</a-button>
        </a-form-model-item>
      </a-form-model>
    </a-collapse-panel>
  </a-collapse>
</template>
<script>
export default {
  props: {
    loading: {
      type: Boolean,
    },
  },
  data() {
    return {
      // 所属角色下拉列表
      roles: [
        { id: '1', name: "管理员" },
        { id: '2', name: "业务员" },
      ],
      // 要查询的参数
      params: {
        // 名称
        name: "",
        // 所属角色
        // roleId: "",
      },
    };
  },
  mounted() {},
  methods: {
    //#region 查询数据
    handleRefresh() {
      this.$emit("handleRefresh");
    },
    //#endregion

    //#region 重置
    handleReset() {
      this.params.name = "";
      // this.params.roleId = "";
      this.$refs.paramsForm.resetFields();
    },
    //#endregion
  },
};
</script>
